﻿@{
    ViewData["Title"] = new string[] { "视频" };
    var specialVideoCMS = ViewData.Get<ContentItem>("specialVideoCMS", null);
    var hotVideoCMS = ViewData.Get<IEnumerable<ContentItem>>("hotVideoCMS", new List<ContentItem>());
    string videoUrl = "";
    var currentuser = UserContext.CurrentUser;
    var specialContentiItem = ViewData.Get<SpecialContentItem>("specialContentiItem", new SpecialContentItem());
}

<style>
    .jp-video-360p .jp-video-play {
        margin-top: -270px !important;
        height: 270px !important;
    }
</style>

@if (specialVideoCMS != null)
{
    <div class="tn-content">
        <div class="container">
            <div class="jh-padding-white  tn-mb-20">
                <div class="row slider-home">
                    <div class="col-xs-6 jh-video-large">
                        @*@if (currentuser != null && currentuser.IsSuperAdministrator())
                {
                            <button class="btn btn-default layervideo" style="position:absolute;right:0;display:none;z-index:100" id="recommend-manage"><i class="fa fa-cog"></i></button>
                        }*@
                        <a href="@SiteUrls.Instance().CMSDetail(specialVideoCMS.ContentItemId)">
                            <div class="text-center">
                                @if (!specialVideoCMS.AdditionalProperties.ContainsKey("VideoUrl") || string.IsNullOrEmpty(specialVideoCMS.AdditionalProperties["VideoUrl"].ToString()))
                                {
                                    videoUrl = specialVideoCMS.GetCMSVideo().GetDirectlyUrl();
                                }
                                else
                                {
                                    videoUrl = specialVideoCMS.AdditionalProperties["VideoUrl"].ToString();
                                }
                                <div id="jp_container_1" class="jp-video " role="application" aria-label="media player" style="width:555px;">
                                    <div class="jp-type-single">
                                        <div id="jquery_jplayer" class="jp-jplayer">
                                        </div>
                                        <div class="jp-gui">
                                            <div class="jp-video-play">
                                                <button class="jp-video-play-icon" role="button" tabindex="0">play</button>
                                            </div>
                                            <div class="jp-interface">
                                                <div class="jp-progress">
                                                    <div class="jp-seek-bar">
                                                        <div class="jp-play-bar"></div>
                                                    </div>
                                                </div>
                                                <div class="jp-current-time" role="timer" aria-label="time">&nbsp;</div>
                                                <div class="jp-duration" role="timer" aria-label="duration">&nbsp;</div>
                                                <div style="display:none" id="presenttime" class="jp-current-presenttime" role="timer" aria-label="time">&nbsp;</div>
                                                <input type="hidden" id="IsCompleted" value="0" />
                                                <div style="display:none" id="totaltime" class="jp-current-totaltime" role="timer" aria-label="time">&nbsp;</div>
                                                <div class="jp-controls-holder">
                                                    <div class="jp-controls">
                                                        <button class="jp-play" role="button" tabindex="0">play</button>

                                                        <button class="jp-stop" role="button" tabindex="0">stop</button>
                                                    </div>
                                                    <div class="jp-volume-controls">
                                                        <button class="jp-mute" role="button" tabindex="0">mute</button>
                                                        <button class="jp-volume-max" role="button" tabindex="0">max volume</button>
                                                        <div class="jp-volume-bar">
                                                            <div class="jp-volume-bar-value"></div>
                                                        </div>
                                                    </div>
                                                    <div class="jp-toggles">
                                                        <button class="jp-repeat" role="button" tabindex="0">repeat</button>
                                                        <button class="jp-full-screen" role="button" tabindex="0">full screen</button>
                                                    </div>
                                                </div>

                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <h4 title="@specialContentiItem.ItemName">@HtmlUtility.TrimHtml(specialContentiItem.ItemName, 30)</h4>
                            <ul class="list-inline text-muted tn-mb-20">
                                <li>
                                    <i class="fa fa-play-circle-o" aria-hidden="true"></i>
                                    @specialVideoCMS.ReadCount()
                                </li>
                                <li>
                                    <i class="fa fa-commenting"></i>
                                    @specialVideoCMS.CommentCount()
                                </li>
                                <li>
                                    <i class="fa fa-clock-o"></i>
                                    @specialVideoCMS.DatePublished.ToFriendlyDate()
                                </li>
                            </ul>
                        </a>
                    </div>
                    <div class="col-xs-6">
                        <div class="row">
                            @foreach (var item in hotVideoCMS)
                            {
                                <div class="col-xs-6 jh-video-small" style="height:220px;">
                                    <a href="@SiteUrls.Instance().CMSDetail(item.ContentItemId)">
                                        <div class="jh-video-block">
                                            <img src="@item.FristFeaturedImage("List")" controls="controls" style="width :100%;">
                                            <ul class="list-inline">
                                                <li class="pull-left">
                                                    <i class="fa fa-play-circle-o" aria-hidden="true"></i>
                                                    @ContentItemExtension.ReadCount(item)
                                                </li>
                                                <li class="pull-right">
                                                    <i class="fa fa-commenting"></i>
                                                    @ContentItemExtension.CommentCount(item)
                                                </li>
                                            </ul>
                                        </div>
                                        <p title="@item.Subject">@HtmlUtility.TrimHtml(item.Subject, 18)</p>
                                    </a>
                                </div>
                            }
                        </div>
                    </div>
                </div>
            </div>
            <div id="listcmsvideo">
                @Html.Action("_ListCMSVideo", "CMS")
            </div>
        </div>
    </div>
    @Html.Hidden("hiddenlabindexs", 1)
    @Html.Hidden("scrollheight", 1)
}
else
{
    <div class="text-center text-warning">
        暂无任何视频
    </div>
}

@*jPlayer 视频播放*@
@Styles.Render("~/Bundle/Styles/jPlayer")

@Styles.Render("~/Bundle/Styles/slider")

@*分页*@
@*&
    @Scripts.Render("~/Bundle/Scripts/jPlayer")
    @Scripts.Render("~/Bundle/Scripts/slider")
    @Scripts.Render("~/Bundle/Scripts/page")

*@
<script src="/js/tn.onscroll.js"></script>
@if (currentuser != null && currentuser.IsSuperAdministrator())
{
    <script>
        require(['jquery'], function () {
            $(".slider-home").hover(function myfunction() {
                $("#recommend-manage").show();
            }, function myfunction() {
                var xoda2 = $("#recommend-manage");
                $("#recommend-manage").hide();
            }
               )
        })
    </script>
}

<script type="text/javascript">
    require(['jquery', 'tnlayer', 'sliderpro', 'page', 'jplayer'], function ($, tnlayer) {

        @*$(".layervideo").click(function () {
            tnlayer.layermodal('资讯推荐', '@SiteUrls.Instance()._ManageSpecialContentItems(SpecialContentTypeIds.Instance().CMS_Video())'.replace(/&amp;/g, "&"), '450px', 'auto')
        })*@


        $(document).ready(function () {
            $.jPlayer.event.play
            $("#jquery_jplayer").jPlayer({
                ready: function () {
                    $(this).jPlayer("setMedia", {
                        m4v: "@videoUrl",
                        poster: "@(specialVideoCMS!=null?specialVideoCMS.FristFeaturedImage("VideoFrist"):string.Empty)"
                    });
                },
                swfPath: "../lib/jplayer",
                supplied: "m4v",
                size: {
                    width: "553px",
                    height: "270px",
                    cssClass: "jp-video-360p"
                },
                autoPlay: false,
                useStateClassSkin: true,
                autoBlur: false,
                smoothPlayBar: true,
                keyEnabled: true,
                remainingDuration: true,
                toggleDuration: true,
                preload: "auto",
                WMode: 'window'
            });
        });

        //点击之后取消焦点
        $("button").bind("focus", function () {
            if (this.blur) { this.blur() };
        });

        //下拉加载
        window.onscroll = function () {
            var scrollheight = Math.ceil($("#scrollheight").val());
            if (getScrollTop() + getClientHeight() == getScrollHeight() && getScrollHeight() != scrollheight) {
                var count = Math.ceil($(".hiddenlabindex").val());
                if (count == Math.ceil($("#hiddenlabindexs").val())) {
                    if (count < 3) {
                        var _that = $(".pagenext");
                        $("#hiddenlabindexs").val(count + 1);
                        $("#scrollheight").val(getScrollHeight());
                        _that.click();
                    }
                }
            }
        }
    })
</script>